<template>
  <el-row>
    <el-col :span="8">
      <div class="grid-content bg-purple">&nbsp;</div>
    </el-col>
    <el-col :span="8">
      <div>
        <el-card>
          <el-form
            ref="form"
            :model="form"
            :rules="rules"
            class="login-form"
            label-position="left"
          >
            <el-form-item style="margin-top: 40px" prop="username">
              <span class="svg-container svg-container-admin">
                <vab-icon :icon="['fas', 'user']" />
              </span>
              <el-input
                v-model.trim="form.username"
                v-focus
                placeholder="请输入用户名"
                tabindex="1"
                type="text"
              />
            </el-form-item>
            <el-form-item prop="password">
              <span class="svg-container">
                <vab-icon :icon="['fas', 'lock']" />
              </span>
              <el-input
                :key="passwordType"
                ref="password"
                v-model.trim="form.password"
                :type="passwordType"
                tabindex="2"
                placeholder="请输入密码"
                @keyup.enter.native="handleLogin"
              />
              <span
                v-if="passwordType === 'password'"
                class="show-password"
                @click="handlePassword"
              >
                <vab-icon :icon="['fas', 'eye-slash']"></vab-icon>
              </span>
              <span v-else class="show-password" @click="handlePassword">
                <vab-icon :icon="['fas', 'eye']"></vab-icon>
              </span>
            </el-form-item>
            <el-button
              :loading="loading"
              class="login-btn"
              type="primary"
              @click="handleLogin"
            >
              登录
            </el-button>
            <router-link to="/register">
              <div style="margin-top: 20px">注册</div>
            </router-link>
          </el-form>
        </el-card>
      </div>
    </el-col>
    <el-col :span="8">
      <div></div>
    </el-col>
  </el-row>
</template>

<script>
  import { isPassword } from '@/utils/validate'

  export default {
    name: 'Login',
    directives: {
      focus: {
        inserted(el) {
          el.querySelector('input').focus()
        },
      },
    },
    data() {
      const validateusername = (rule, value, callback) => {
        if ('' === value) {
          callback(new Error('用户名不能为空'))
        } else {
          callback()
        }
      }
      const validatePassword = (rule, value, callback) => {
        if (!isPassword(value)) {
          callback(new Error('密码不能少于6位'))
        } else {
          callback()
        }
      }
      return {
        nodeEnv: process.env.NODE_ENV,
        title: this.$baseTitle,
        form: {
          username: '',
          password: '',
        },
        rules: {
          username: [
            {
              required: true,
              trigger: 'blur',
              validator: validateusername,
            },
          ],
          password: [
            {
              required: true,
              trigger: 'blur',
              validator: validatePassword,
            },
          ],
        },
        loading: false,
        passwordType: 'password',
        redirect: undefined,
      }
    },
    watch: {
      $route: {
        handler(route) {
          this.redirect = (route.query && route.query.redirect) || '/'
        },
        immediate: true,
      },
    },
    created() {
      document.body.style.overflow = 'hidden'
    },
    beforeDestroy() {
      document.body.style.overflow = 'auto'
    },
    mounted() {
      // setTimeout(() => {
      //   this.handleLogin()
      // }, 3000)
    },
    methods: {
      handlePassword() {
        this.passwordType === 'password'
          ? (this.passwordType = '')
          : (this.passwordType = 'password')
        this.$nextTick(() => {
          this.$refs.password.focus()
        })
      },
      handleLogin() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.loading = true
            this.$store
              .dispatch('user/login', this.form)
              .then((res) => {
                //console.log(res.data)
                // localStorage.setItem('userid', res.data.userId)
                // localStorage.setItem('username', res.data.usernName)
                // localStorage.setItem('userRole', res.data.userRole)
                const routerPath =
                  this.redirect === '/404' || this.redirect === '/401'
                    ? '/'
                    : this.redirect
                this.$router.push(routerPath).catch(() => {})
                this.loading = false
              })
              .catch(() => {
                this.loading = false
              })
          } else {
            return false
          }
        })
      },
    },
  }
</script>
